<template>
  <div class="GuestDetails">
    <div class="topBg">
      <div class="r-bg">
        <x-img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585215767558&di=d658d3ac5cbc9aa49f6bdee21c59a5d6&imgtype=0&src=http%3A%2F%2Fent.k618.cn%2Fylzx%2F201612%2FW020161231691371482636.jpeg"
          class="img"
        ></x-img>
      </div>
      <div class="l-bg">
        <div class="topItem">
          <p class="topName">
            刘德华
            <span class="topSex">男</span>
          </p>
        </div>
        <div class="itemView">
          <p class="itemTitle">参会记录：</p>
          <p class="itemContent">8次</p>
        </div>
        <div class="itemView">
          <p class="itemTitle">最近参会时间：</p>
          <p class="itemContent">2020-03-08</p>
        </div>
        <div class="itemView">
          <p class="itemTitle">邀请人：</p>
          <p class="itemContent">周杰伦/蔡依林/陈奕迅</p>
        </div>
      </div>
    </div>
    <div style="width:100%;height:100px;">
      <div class="middleCell">
        <x-img class="middleIcon"></x-img>
        <span class="middleTitle">代表的行业：美发/保险</span>
      </div>
      <div class="middleCell">
        <x-img class="middleIcon"></x-img>
        <span class="middleTitle">联系电话：18515666648</span>
      </div>
      <div class="hy">
        <span class="meetingButton">会议记录</span>
      </div>

      <x-table :cell-bordered="false" :content-bordered="false" style="background-color:#fff;">
        <thead>
          <tr style="background-color: #F7F7F7; content-bordered:false">
            <th class="headerView">报名时间</th>
            <th class="headerView">头像名称</th>
            <th class="headerView">代表行业</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="cell">Apple</td>
            <td class="cell">$1.25</td>
            <td class="cell">x 1</td>
          </tr>
          <tr>
            <td class="cell">Banana</td>
            <td class="cell">$1.20</td>
            <td class="cell">x 2</td>
          </tr>
        </tbody>
      </x-table>
      <div class="bottomView">
          <span class="exchangeButton">交换名片</span>
      </div>
    </div>
  </div>
</template>

<script >
import { XImg } from "vux";
import { Flexbox, FlexboxItem, Divider,XTable,LoadMore} from "vux";

export default {
  name: "GuestDetails",
  data() {
    return {};
  },
  methods: {},
  components: {
    XImg,
    Flexbox,
    FlexboxItem,
    Divider,
    XTable,
    LoadMore
  }
};
</script>


<style scoped>
.topBg {
  width: 100%;
  height: 230px;
  background-color: white;
  display: flex;
}
.r-bg {
  /* background-color: yellow; */
  width: 50%;
  height: 230px;
}
.l-bg {
  /* background-color: blue; */
  width: 50%;
  height: 230px;
}
.img {
  margin: 10px;
  width: 90%;
  height: 90%;
}
.topName {
  margin-top: 10px;
  margin-left: 15px;
  font-size: 20px;
}
.topSex {
  margin-left: 30px;
  font-size: 14px;
}
.itemView {
}
.itemTitle {
  color: rgb(89, 91, 92);
  font-size: 16px;
  margin-top: 12px;
  margin-left: 15px;
}
.itemContent {
  color: rgb(156, 157, 159);
  font-size: 14px;
  margin-top: 5px;
  margin-left: 15px;
}
.middleCell {
  width: 100%;
  height: 50%;
  background-color: white;
  margin-top: 1px;
  /* display: inline-block;
	vertical-align: top; */
  /* vertical-align:middle; */
}
.middleIcon {
  height: 30px;
  height: 30px;
  margin-top: 10px;
  margin-left: 10px;
  vertical-align: middle;
  background-color: yellow;
}
.middleTitle {
  vertical-align: bottom;
  /* position: relative;
  top: -5px; */
  margin-left: 5px;
  line-height: 30px;
  color: rgb(89, 91, 92);

}

.hy {
  text-align: center;
  height: 50px;
  width: 100%;
  margin-top: 1px;
  background-color: white;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.meetingButton {
  background-color: rgb(238, 194, 109);
  color: white;
  margin-top: 10px;
  width: 110px;
  height: 30px;
  display: inline-block;
  border-radius: 15px;
  font-size: 18px;
  line-height: 30px

}
.headerView {
  background-color: white;
  color: rgb(110, 111, 112);
}

.cell {
  color: rgb(171, 172, 173);

}
.bottomView {
  background-color: white;
  margin-top: 1px;
  width: 100%;
  height: 100%;
  /* margin: 0x auto; */
  text-align: center;

}
.exchangeButton {
    background-color: rgb(238, 194, 109);
    width: 90%;
    height: 40px;
    font-size: 20px;
    display: inline-block;
    border-radius: 5px;
    margin-top: 30px;
    color: white;
      line-height: 40px

}

</style>